<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="h_top">
          <div class="bread_title">
            <span>更新知识</span>
          </div>
          <div class="save_button">
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-back" size="mini" @click="goBack">返回</el-button>
            </div>
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-document-checked" size="mini" @click="save">保存</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-row>
        <el-col :span="24">
          <el-form ref="form" :model="data" :inline="true" :rules="formRules">
            <el-input v-model="data.id" type="hidden" />
            <el-row :gutter="10">
              <el-col :span="4">
                <el-form-item prop="coding">
                  <div>编号</div>
                  <el-input v-model="data.coding" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="name">
                  <div>名称</div>
                  <el-input v-model="data.name" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="parent_id">
                  <div>所属分类</div>
                  <v-select-s v-model="data.category_id" action="knowledgeCategoryList" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="format">
                  <div>附件类型</div>
                  <el-select v-model="data.format" size="mini">
                    <el-option v-for="(item, knowladgeIndex) in knowledgeFormat" :key="knowladgeIndex" :value="item.value" :label="item.name" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="eq_first_category_id">
                  <div>设备一级分类</div>
                  <v-select v-model="data.eq_first_category_id" action="equipmentCategoryList" :query="{level:0}" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="eq_category_id">
                  <div>设备终极分类</div>
                  <v-select v-model="data.eq_category_id" action="equipmentCategoryList" :disabled="!data.eq_first_category_id" :query="{parent_id:data.eq_first_category_id}" />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="sort">
                  <div>排序</div>
                  <el-input v-model="data.sort" size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-tabs>
            <el-tab-pane label="描述">
              <el-row :gutter="10">
                <el-col :span="4">
                  <div>
                    <span>创建时间日期</span>
                    <el-input v-model="data.create_time" placeholder="创建时间日期" class="mtb10" size="mini" :disabled="true" />
                  </div>
                  <div>
                    <span>创建人</span>
                    <el-input v-model="data.cr_admin" placeholder="创建人" class="mtb10" size="mini" :disabled="true" />
                  </div>
                  <div v-if="data.update_time">
                    <div>
                      <span>最近更新</span>
                      <el-input v-model="data.update_time" placeholder="最近更新" class="mtb10" size="mini" :disabled="true" />
                    </div>
                    <div>
                      <span>更新者</span>
                      <el-input v-model="data.up_admin" placeholder="更新者" class="mtb10" size="mini" :disabled="true" />
                    </div>
                  </div>
                </el-col>
                <el-col :span="16">
                  <Tinymce id="content" v-model="data.content" />
                </el-col>
                <el-col :span="4">
                  <adjunct :request_id="request_id" />
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane lazy label="维护负责人">
              <el-table :data="admin_list">
                <el-table-column label="姓名" min-width="24%" prop="admin.name" />
                <el-table-column label="电话" min-width="24%" prop="admin.phone" />
                <el-table-column label="岗位" min-width="24%" prop="admin.admin_jobs.name" />
                <el-table-column label="状态" min-width="16%" prop="admin.status">
                  <template v-slot="{row}">{{ theStatus[row.admin.status] }}</template>
                </el-table-column>
                <el-table-column label="操作" min-width="8%">
                  <template scope="scope">
                    <el-button type="text" size="small" @click="adminIdsDel(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
                <div slot="append">
                  <el-form ref="eq_admins_form" :model="admins" :inline="true" class="hf_form append_other_admin" :rules="adminsRules">
                    <el-row :gutter="10">
                      <el-col :span="6">
                        <el-form-item prop="admin_id">
                          <v-select-s v-model="admins.admin_id" action="adminList" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">
                        <el-form-item>
                          <el-input disabled size="mini" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">
                        <el-form-item>
                          <el-input disabled size="mini" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="4">
                        <el-form-item>
                          <el-input disabled size="mini" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="2">
                        <el-form-item>
                          <el-button icon="el-icon-upload2" size="mini" @click="adminsSave" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import API from '@/api/knowledge/knowledge'
import { knowledgeFormat, theStatus } from '@/utils/options'
import Tinymce from '@/components/Tinymce/index'
import Adjunct from '@/components/Upload/adjunct'
import VSelect from '@/components/select'
import VSelectS from '@/components/select-search'
export default {
  inject: ['backUrl', 'delOne', 'update', 'goUrl'],
  components: {
    Tinymce,
    VSelect,
    VSelectS,
    Adjunct
  },
  data() {
    return {
      data: {
        admin: {
          phone: ''
        },
        cr_admin: {
          name: ''
        }
      },
      admin_list: [],
      knowledgeFormat,
      theStatus,
      request_id: null,
      admins: {},
      formRules: {
        coding: [
          {
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入文档名称',
            trigger: 'blur'
          }
        ],
        format: [
          {
            required: true,
            message: '请选择附件类型',
            trigger: 'change'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ]
      },
      adminsRules: {
        admin_id: [
          {
            required: true,
            message: '请选择负责人',
            trigger: 'change'
          }
        ]
      }
    }
  },
  watch: {},
  created() {
    this.index()
  },
  methods: {
    index() {
      const id = this.$route.params.id
      API.getOne(id).then(response => {
        if (response.data.error_code === 888) {
          this.$alert('您请求的知识不存在', '错误', {
            confirmButtonText: '确定',
            callback: () => {
              this.backUrl()
            }
          })
        }
        this.data = response.data
        this.admin_list = response.data.admin_list
        this.request_id = parseInt(id)
      })
    },
    confirmDel() {
      const id = this.data.id
      this.delOne(API, id, true)
    },
    save() {
      const thisData = this.data
      const thisForm = this.$refs.form
      this.update(API, thisData, thisForm)
    },
    adminIdsDel(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        API.removeAdmin({ 'id': id }).then((response) => {
          if (response.data.error_code === 1) {
            this.$message({
              message: '恭喜你，删除成功',
              type: 'success'
            })
            API.getOne(this.$route.params.id).then(response => {
              this.admin_list = response.data.admin_list
            })
          } else {
            this.$message.error(response.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    adminsSave() {
      this.$refs.eq_admins_form.validate((valid) => {
        if (valid) {
          const admin_data = {
            'admin_id': this.admins.admin_id,
            'knowledge_id': this.$route.params.id
          }
          API.appendAdmin(admin_data).then(response => {
            if (response.data.error_code === 1) {
              this.$message({
                message: '恭喜你，新增成功',
                type: 'success'
              })
              API.getOne(this.$route.params.id).then(response => {
                this.admin_list = response.data.admin_list
              })
            } else {
              this.$message.error(response.data.message)
            }
          })
        }
      })
    },
    goBack() {
      this.goUrl('/knowledge/knowledge')
    }
  }
}
</script>
